import React, {Component} from 'react'
import {Affix, Button, Col, Row} from 'antd'
import qrCode from '../../images/qr.jpg'
import isMobile from '../../constant/client-util'
import RegisterStepModal from './register/register-step-modal'

class Footer extends Component {
  state = {
    isRegisterModalOpen: false
  }

  render() {
    const year = new Date().getFullYear()
    return (
      <div>
        <Row style={{
          backgroundSize: 'cover',
          backgroundImage: 'url(https://s3.cn-north-1.amazonaws.com.cn/tws-courses-resource/pair-programing-images/%E5%BA%95%E9%83%A8-%E5%BA%95%E5%9B%BE.png)',
          backgroundRepeat: 'no-repeat'
        }} type="flex" justify="space-around" align="middle">
          <Col xs={24} span={8} style={{textAlign: 'center'}}>
            <img src={qrCode} alt='' width={125} height={125} style={{marginTop: '.40rem'}}/>
            <div style={{
              color: 'white',
              fontWeight: 'bold',
              marginTop: '.17rem',
              fontSize: '15px'
            }}>
              与我们互动，扫描校招官微二维码
            </div>
            <div style={{margin: '.30rem 0 .5rem  '}}>
              <a className='footer-link tws-4th-btn-ThoughtWorksOfficial' style={{color: 'white', fontSize: '15px'}}
                 href="https://www.thoughtworks.com/">ThoughtWorks 官网</a>
              <div style={{
                color: 'RGB(128,124,129)',
                fontSize: '15px'
              }}>© {year} ThoughtWorks.Inc
              </div>
            </div>
          </Col>
        </Row>
        {
          isMobile()
            ? <Row>
              <Col span={24}>
                <Affix offsetBottom={0}>
                  <Button type='primary' size='large'
                          className='tws-4th-btn-signUp'
                          onClick={() => this.setState({isRegisterModalOpen: true})}
                          style={{
                            borderRadius: '0',
                            height: 70,
                            width: '100%',
                            fontWeight: 'bold'
                          }}>
                    <span style={{fontSize: '20px'}}>我要报名</span>
                  </Button>
                </Affix>
              </Col>
            </Row>
            : ''
        }
        <RegisterStepModal
          isRegisterModalOpen={this.state.isRegisterModalOpen}
          closeModal={(callback) => this.setState({isRegisterModalOpen: false}, () => callback())}/>
      </div>
    )
  }
}

export default Footer
